<template>
  <div class="charging-behavior">
    <p class="title">充电行为分析</p>
    <div id="charging-behavior-chart" class="charging-behavior-chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
let labelList = {
  billAverageChargingDuration: [
    '0-1小时',
    '1-3小时',
    '3-5小时',
    '5-8小时',
    '8小时以上',
  ],
  deviceDailyUseDuration: [
    '0-2小时',
    '2-6小时',
    '6-12小时',
    '12-18小时',
    '18-24小时以上',
  ],
  chargingTimesPerCapita: ['0-1次', '1-4次', '4-8次', '8-16次', '16次以上'],
}
export default {
  name: 'ChargingBehavior',
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chartList: [],
    }
  },
  watch: {
    data(val) {
      this.chartList = []
      val.chargingTimesPerCapita &&
        val.billAverageChargingDuration &&
        val.deviceDailyUseDuration &&
        this._handleChartData(val)
    },
  },
  methods: {
    _getPieData(data) {
      let pieData = {}
      Object.keys(data).forEach((item) => {
        let innnerData = data[item]
        pieData[item] = []
        Object.keys(innnerData).forEach((innerItem) => {
          pieData[item].push({
            name: labelList[item][parseInt(innerItem) - 1],
            value: innnerData[innerItem],
          })
        })
      })
      return pieData
    },
    _handleChartData(data) {
      let chartDom = document.getElementById('charging-behavior-chart')
      if (!chartDom) return
      let myChart = echarts.init(chartDom)
      const pieData = this._getPieData(data)
      let option = {
        color: ['#0C4478', '#00A6F3', '#6DE3FD', '#B2B2B2', '#FFFFFF'],
        grid: {
          top: '0',
          bottom: '0',
          left: '0',
          right: '0',
          // containLabel: true,
          // show: true,
        },
        title: [
          {
            subtext: '订单平均充电时长',
            subtextStyle: {
              color: '#FFFFFF',
              fontSize: '12px',
            },
            left: '16.67%',
            top: '75%',
            textAlign: 'center',
          },
          {
            subtext: '端口日均使用时长',
            subtextStyle: {
              color: '#FFFFFF',
              fontSize: '12px',
            },
            left: '50%',
            top: '75%',
            textAlign: 'center',
          },
          {
            subtext: '人均30日充电次数',
            subtextStyle: {
              color: '#FFFFFF',
              fontSize: '12px',
            },
            left: '83.33%',
            top: '75%',
            textAlign: 'center',
          },
        ],
        series: [
          {
            type: 'pie',
            minAngle: 1,
            radius: ['20%', '30%'],
            center: ['50%', '50%'],
            data: pieData.billAverageChargingDuration,
            label: {
              position: 'outside',
              color: 'rgba(255, 255, 255, 0.8)',
              formatter: '{b}\n{d}%',
              // overflow: 'none',
            },
            labelLine: {
              // length: 2,
              // length2: 2,
            },
            left: 0,
            right: '66.6667%',
            top: 0,
            bottom: '20px',
          },
          {
            type: 'pie',
            minAngle: 1,
            radius: ['20%', '30%'],
            center: ['50%', '50%'],
            data: pieData.deviceDailyUseDuration,
            label: {
              position: 'outside',
              color: 'rgba(255, 255, 255, 0.8)',
              formatter: '{b}\n{d}%',
              // overflow: 'none',
            },
            labelLine: {
              // length: 2,
              // length2: 2,
            },
            left: '33.3333%',
            right: '33.3333%',
            top: 0,
            bottom: '20px',
          },
          {
            type: 'pie',
            minAngle: 1,
            radius: ['20%', '30%'],
            center: ['50%', '50%'],
            data: pieData.chargingTimesPerCapita,
            label: {
              position: 'outside',
              color: 'rgba(255, 255, 255, 0.8)',
              formatter: '{b}\n{d}%',
              // overflow: 'none',
            },
            labelLine: {
              // length: 2,
              // length2: 2,
            },
            left: '66.6667%',
            right: 0,
            top: 0,
            bottom: '30px',
          },
        ],
      }
      option && myChart.setOption(option)
      this.chartList.push(myChart)
    },
    _handleRezize() {
      this.$nextTick(() => {
        this.chartList.forEach((item) => item && item.resize())
      })
    },
  },
  mounted() {},
  activated() {
    window.addEventListener('resize', this._handleRezize)
  },
  deactivated() {
    window.removeEventListener('resize', this._handleRezize)
  },
  deystroyed() {
    window.removeEventListener('resize', this._handleRezize)
  },
}
</script>
<style lang="scss" scoped>
.charging-behavior {
  width: 100%;
  height: calc(30% - 10px);
  margin-top: 10px;
  background: url(../../../assets/images/exhibition/middlebg.png) center center
    no-repeat;
  background-size: 100% 100%;
  padding-left: 12px;
  position: relative;
  overflow: hidden;
  .charging-behavior-chart {
    width: 100%;
    height: calc(95% - 40px);
  }
}
@media screen and (max-width: 1440px) {
  .charging-behavior {
    height: calc(30% - 5px);
    margin-top: 5px;
    padding-left: 4px;
    .charging-behavior-chart {
      width: 100%;
      height: calc(95% - 30px);
    }
  }
}
</style>
